<script lang="ts" setup name="RefillRule">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { Member } from '~/src/api/interface/member'
import { deleteRefillRuleAPI, getRefillRuleAPI } from '~/src/api/member'
import { useTableRowStore } from '~/src/store/modules/useTableRowStore'
import { formatDate } from '~/src/utils/date-formatter'
import { refillRuleColumns } from './info/columns'
const tableRef = ref<ProTableInstance>()
const router = useRouter()
const initData = reactive<Partial<Member.RefillRule>>({
  depositType: 1,
  id: 0,
  startTime: formatDate(0, 'start', 'yyyy-MM-dd'),
  endTime: formatDate(0, 'end', 'yyyy-MM-dd'),
})
const tableRowStore = useTableRowStore()
const goDetail = (title: string, row: Partial<Member.RefillRule>) => {
  tableRowStore.setRow(row ? cloneDeep(row) : initData)
  router.push('/member/RefillRuleEdit')
}

const onDeleteRow = () => {
  useDeleteData(deleteRefillRuleAPI, tableRef.value as ProTableInstance)
}
</script>

<template>
  <div class="auto-height-container auto-height-container main-box">
    <pro-table
      ref="tableRef"
      :columns="refillRuleColumns"
      :indent="20"
      :isCard="false"
      :request-api="getRefillRuleAPI"
      row-key="id"
      title="充值规则列表"
    >
      <template #tableHeader>
        <el-button :icon="CirclePlus" type="primary" @click="goDetail('新增', initData)">新增充值规则</el-button>
        <!-- <el-button :icon="Delete">删除</el-button> -->
        <el-button v-auth="'delete'" :icon="Delete" @click="onDeleteRow">删除</el-button>
      </template>
      <template #date="{ row }">
        {{ row.date ? row.date.slice(0, 11) : '' }}
      </template>
      <template #name="{ row }">
        <el-button :icon="EditPen" link type="primary" @click.stop="goDetail('编辑', row)">{{ row.name }}</el-button>
      </template>

      <template #startTime="{ row }">
        <div>{{ row.startTime?.slice(0, 11) }}</div>
      </template>
      <template #endTime="{ row }">
        <div>{{ row.endTime?.slice(0, 11) }}</div>
      </template>
    </pro-table>
  </div>
</template>

<style lang="scss" scoped></style>
